<template>
  <div id="contain">
    <div>
      <el-form
        :model="ruleForm"
        status-icon
        label-width="150px"
        class="demo-ruleForm"
        style="width: 940px"
      >
        <el-form-item label="token过期时间(天):">
          <el-input v-model="ruleForm.valid" style="200px"></el-input>
        </el-form-item>
        <el-form-item label="密码错误次数(次):">
          <el-input v-model="ruleForm.fail" style="200px"></el-input>
        </el-form-item>
        <el-form-item label="订单过期时间(天):">
          <el-input v-model="ruleForm.orderExpire" style="200px"></el-input>
        </el-form-item>
        <el-form-item label="账号锁定时间(天):">
          <el-input v-model="ruleForm.lock" style="200px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableList"
        style="width: 945px"
        stripe
        :row-style="rowStyle"
        height="600"
      >
        <el-table-column prop="opt" label="操作" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="loginName" label="用户" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="时间" align="center">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[5, 10, 15]"
        :page-size="limit"
        layout="sizes, prev, pager, next"
        :total="totalCount"
      >
      </el-pagination>
    </div>
    <div class="block" style="width: 940px">
      <span class="span1">请勿轻易尝试</span>
      <el-button type="danger" round style="float: right" @click="tip"
        >恢复出厂设置</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
      token: window.localStorage.getItem("token"),
      page: 1,
      limit: 5,
      totalCount: 0,
      tableList: [],
    };
  },
  mounted() {
    this.getform();
    this.gettable();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.gettable();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.gettable();
    },
    rowStyle() {
      return { height: "60px" };
    },
    submitForm() {
      let data = {};
      for (let i in this.ruleForm) {
        data[i] = parseInt(this.ruleForm[i]);
      }
      //   console.log(data);
      this.$axios({
        method: "post",
        url: "/sys/setting/base",
        headers: { token: this.token },
        data: data,
      }).then((res) => {
        //   console.log('提交');
        // console.log(res);
        if (res.data.code === 0) {
          this.$message({
            type: "success",
            message: "提交成功！",
          });
          this.getform();
        }
      });
    },
    getform() {
      this.$axios({
        method: "post",
        url: "/sys/setting/base/info",
        headers: { token: this.token },
      }).then((res) => {
        // console.log(res);
        if (res.data.code === 0) {
          this.ruleForm = res.data.page;
        }
      });
    },
    gettable() {
      this.$axios({
        method: "post",
        url: "/sys/log/list",
        headers: { token: this.token },
        data: {
          page: this.page,
          limit: this.limit,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          this.tableList = res.data.page.regard;
          this.totalCount = res.data.page.totalCount;
        }
      });
    },
    tip () {
      const h = this.$createElement
      const that = this
      this.$msgbox({
        title: '恢复出厂设置',
        message: h('div', null, [
            h('p', null, '此操作不可逆，是否继续？')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(
          () => {
            that.back()
          }
      )
    },
    back() {
      this.$axios({
        method: "post",
        url: "/sys/setting/reset",
        headers: { token: this.token },
      }).then((res) => {
        if (res.data.code !== 0) {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    }
  },
};
</script>
<style  scoped>
.demo-ruleForm {
  margin: 20px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.span1{
 float: right;
 margin:10px;
 color:rgb(219, 128, 128);
 font-size: 12px;
}
</style>>
